<script type="text/x-template" id="notechannelmanager">
    <div>
        <el-container>
            <el-header>
                <div style="padding: 10px;height: 50px">
                    <el-form :model="searchform"  label-width="100px" class="demo-ruleForm">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="标题" >
                                    <el-input v-model="searchform.title" placeholder="请输入标题"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="标签名称" >
                                    <el-input v-model="searchform.tag" placeholder="请输入标签"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="日期(前)" >
                                    <el-date-picker v-model="searchform.createdate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 100%"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <div align="center">
                                    <el-button type="primary" @click="search_btn" id="search-btn">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-header>
            <el-container>
                <el-aside width="15%">
                    <div style="padding: 10px">
                        <el-button type="primary" icon="el-icon-edit" style="width: 100%" @click="addchannel">新建栏目</el-button>
                        <!--  树-->
                        <el-tree :data="data"
                                 :props="defaultProps"
                                 node-key="id"
                                 @node-click="handleNodeClick_channel"
                                 style="padding-top: 5px"></el-tree>
                    </div>
                </el-aside>
                <el-container>
                    <el-main>
                        <div style="padding-bottom: 10px">
                            <el-button-group>
                                <el-button type="primary" icon="el-icon-edit" @click="addtitle">添加</el-button>
                                <el-button type="primary" icon="el-icon-copy-document" @click="movenote">移动</el-button>
                                <el-button type="primary" icon="el-icon-share"></el-button>
                                <el-button type="primary" icon="el-icon-delete"></el-button>
                            </el-button-group>
                        </div>
                        <template>
                            <el-table
                                    :data="tableDataNoteList"
                                    stripe
                                    @row-click="row_click"
                                    @selection-change="handleSelectionChange"
                                    style="width: 100%;min-height: 500px">
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        prop="title"
                                        :show-overflow-tooltip="true"
                                        label="标题"
                                        width="250">
                                </el-table-column>
                                <el-table-column
                                        prop="mChannel.channelname"
                                        label="栏目"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="mChannel.channelpath"
                                        label="栏目path"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="tag"
                                        label="标签"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        width="200"
                                        label="创建时间">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        width="200">
                                    <template slot-scope="scope">
                                        <el-button @click="updateNoteManager(scope.row)" type="text" size="small">编辑</el-button>
                                        <el-button type="text" @click="deleteNoteManager(scope.row.id)" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>

                        <el-divider></el-divider>

                        <el-pagination
                                background
                                @current-change="handleCurrentChange"
                                layout="total,prev, pager, next"
                                :total="total">
                        </el-pagination>

                    </el-main>
                </el-container>
            </el-container>
        </el-container>

        <!-- 添加栏目        -->
        <el-dialog title="添加栏目" :visible.sync="dialogFormVisible_addchannel">
            <el-form :model="channelform"  ref="channelform" label-width="100px" class="demo-ruleForm">
                <el-form-item label="上级栏目" prop="channelName">
                    <el-cascader
                            v-model="channelform.channelpid"
                            :options="data"
                            :props="props"
                            style="width: 100%"
                            :clearable="true"
                            @change="handleChange_addchannel"></el-cascader>
                </el-form-item>
                <el-form-item label="栏目名称" prop="channelname">
                    <el-input v-model="channelform.channelname"></el-input>
                </el-form-item>
                <el-form-item label="栏目路径" prop="channelpath">
                    <el-input v-model="channelform.channelpath"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

        <!--  移动栏目       -->
        <el-dialog title="文章栏目移动" :visible.sync="dialogFormVisible_movechannel">
            <div style="min-height: 300px">
                <!--  树-->
                <el-tree :data="data"
                         :props="defaultProps"
                         node-key="id"
                         @node-click="handleNodeClick_movechannel"
                         style="padding-top: 5px"></el-tree>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_movechannel = false">取 消</el-button>
                <el-button type="primary" @click="submit_channel">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 添加分组        -->
        <el-dialog title="添加分组" :visible.sync="dialogFormVisible_addgroup">

        </el-dialog>



    </div>
</script>

<script>
    let notechannelmanager={
        data() {
            return {
                selectedchannelId:'',
                dialogFormVisible_movechannel:false,
                searchform:{},
                activeName_addfile:'first_addfilepath',
                dialogFormVisible_addchannel:false,
                dialogFormVisible_addgroup : false,
                activeIndex: '1',
                activeIndex2: '1',
                total:0,
                input:'',
                tableDataNoteList: [],
                search:'',
                keyword:'',
                data: [],
                defaultProps: {
                    children: 'childs',
                    label: 'channelname'
                },
                props:{
                    children: 'childs',
                    label: 'channelname',
                    value:'id',
                    checkStrictly:true,
                    emitPath:false
                },
                multipleSelection:[],
                channelform:{
                    channelname:'',
                    channelpath:'',
                    channelpid:''
                },
                movechannelId:'',
                pageNum:1,
                pageSize:10
            }
        },
        template: '#notechannelmanager',
        created(){
            this.getChannel();
            this.getlist(this.pageNum);
        },
        methods: {
            search_btn(){
                this.getlist(this.pageNum);
            },
            addtitle(){
                if(this.selectedchannelId!==''){
                    window.open('/add?channelId='+this.selectedchannelId)
                }else {
                    window.open('/add')
                }
            },
            deleteNoteManager(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.GET('/note/delete',{'id':id},(result)=> {
                        if(result.code==0){
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            local.reload();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateNoteManager(val){
                window.open(val.updateUrl)
            },
            //移动栏目
            submit_channel(){
                let nids=[];
                for (let i = 0; i < this.multipleSelection.length;i++) {
                    nids.push(this.multipleSelection[i].id);
                }
                let data={};
                data.channelId=this.movechannelId;
                data.data=nids;
                api.POST('/note/movechannel',data,(res)=>{
                    if(res.code==0){
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                    }else {
                        return this.$message.error('移动失败');
                    }
                })
                console.log(JSON.stringify(this.multipleSelection));
            },
            //栏目移动
            handleNodeClick_movechannel(v){
                this.movechannelId=v.id;
            },
            movenote(){
                if(this.multipleSelection.length===0){
                    return this.$message.error('请先选中数据');
                }
                this.dialogFormVisible_movechannel=true;
                console.log(this.movechannelId)
                console.log(JSON.stringify(this.multipleSelection));
            },
            //多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getlist(val){
                this.pageNum=val;
                this.searchform.page=this.pageNum;
                this.searchform.size=this.pageSize;
                api.GET('/note/page',this.searchform,(result)=> {
                    this.tableDataNoteList=result.data.records;
                    this.total=result.data.total;
                })
            },
            handleChange_addchannel(val){
              console.log(JSON.stringify(val))
            },
            submitForm() {
                this.channelform.ispri=false;
               api.POST('/channel/add',this.channelform,(res)=>{
                   if(res.code==0){
                       this.$message({
                           message: res.msg,
                           type: 'success'
                       });
                       this.getChannel();
                       this.dialogFormVisible_addchannel=false;
                       this.channelform={};
                   }else {
                       this.$message.error(res.msg);
                   }
               })
            },
            getChannel(){
                api.GET('/channel/getchannel',null,(res)=>{
                    if(res.code===0){
                        this.data=res.data;
                    }
                })
            },
            row_click(row, column, event){
                if(column.label!=='操作'){
                    window.open(row.contentUrl);
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleNodeClick_channel(data){
                this.selectedchannelId=data.id;
                this.searchform.channelpath=data.channelpath;
                this.getlist(this.pageNum);
            },
            handleClick_file(tab, event){
                console.log(tab, event);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            addchannel(){
                this.dialogFormVisible_addchannel=true;
            },
            addfilepane(){
                this.dialogFormVisible_addpane=true;
            },
            addfilegroup(){
                this.dialogFormVisible_addgroup=true;
            },
            searchnote(){
                this.getlist(1)
            },
            handleCurrentChange(val) {
                this.getlist(val)
            },
            locationfref(href){
                window.open(href);
            },
            handleNodeClick(data) {
                console.log(data);
            },
            locationppreview(id){
                window.open('/page/contentinfo.html?obj='+id)
            },
            updateNote(id){
                window.open('/page/update.html?obj='+id)
            },
            handleNodeClick(data) {
                console.log(data);
            },
            deleteNote(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.GET('/note/delete',{'id':id},(result)=> {
                        if(result.code==0){
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            local.reload();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
    Vue.component('notechannelmanager',notechannelmanager);

    function keyDown() {
        var keycode = event.keyCode;
        var realkey = String.fromCharCode(event.keyCode);
        if(keycode==13){
            $("#search-btn").click();
        }
        // alert("按键码: " + keycode + " 字符: "+ realkey);

    }
    document.onkeydown = keyDown;
</script>